<template>
  <div class="record">
    <div class="clear" v-if="histories.length !== 0">
      <el-button type="warning" plain :icon="Refresh" @click="$router.go(0)">刷新</el-button>
      <el-button class="btn" type="danger" plain @click="claerData" :icon="DeleteFilled">
        清除历史数据
      </el-button>
    </div>
    <el-timeline class="timeline">
      <template v-for="item in histories">
        <el-timeline-item
          :timestamp="item.selectAt"
          placement="top"
          center
          :type="item.operation === '选课' ? 'success' : 'danger'"
        >
          <el-card class="card">
            <h4>
              {{ item.cname }}
              <el-tag class="tag" :type="item.type === 1 ? 'warning' : ''">
                {{ item.type === 1 ? '主修' : '选修' }}
              </el-tag>
            </h4>
            <p>
              <span class="text">授课教师：{{ item.tname }}</span>
              <span class="text">上课地点：{{ item.location }} </span>
              <span class="text">学时：{{ item.lesson_period }} </span>
              <span class="text">学分：{{ item.credit }} </span>
              <span class="text"
                >操作：<span :class="item.operation === '选课' ? 'success' : 'danger'">{{
                  item.operation
                }}</span>
              </span>
            </p>
          </el-card>
        </el-timeline-item>
      </template>
    </el-timeline>
    <div class="none" v-if="histories.length === 0">
      <h2>暂无历史数据</h2>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick, onBeforeMount } from 'vue'
import { DeleteFilled, Refresh } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
import { binMsg } from '@/global/api.js'

const store = useStore()
const histories = computed(() => store.getters['selectCourseModule/historiesList'])
const userInfo = computed(() => store.state.userModule.userInfo)

// 清除数据
const claerData = async () => {
  try {
    await ElMessageBox.confirm('确认清除历史数据吗？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true
    })
    store.dispatch('selectCourseModule/clearHistoriesAction', { stu_num: userInfo.value.stu_num })
  } catch (e) {
    binMsg('info', '已取消')
  }
}

onMounted(() => {
  store.dispatch('selectCourseModule/searchHistoriesAction', { stu_num: userInfo.value.stu_num })
})
</script>

<style lang="less" scoped>
.record {
  width: 100%;
  height: 100%;
  padding: 10px 30px;
  .timeline {
    margin-left: 50px;
  }
  .card {
    width: 860px;
    .tag {
      margin-left: 15px;
    }
    .text {
      padding-right: 75px;
    }
    .success {
      color: #67c23a;
    }
    .danger {
      color: #f56c6c;
    }
  }
  .none {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .clear {
    width: 985px;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    .btn {
      right: 100px;
    }
  }
}
</style>
